<template>
    <el-aside width="200px">
        <h1 class="title">
            <img src="http://www.gcjiu.com/static/images/logo_active.png" style="height: 50px;" alt="国醇LOGO">
        </h1>

        <div class="menu">
            <el-scrollbar>
                <el-menu
                    :default-active="defaultPath"
                    class="el-menu-vertical-demo"
                    background-color="rgba(255, 255, 255, 0)"
                    text-color="#fff"
                    active-text-color="#fff"
                    :collapse="setting.collapse"
                    :unique-opened="setting.isAccordion"
                >
                    <template v-for="item in menu">
                        <MenuRender :item="item" @route="handleRoute" />
                    </template>
                </el-menu>
            </el-scrollbar>
        </div>
    </el-aside>
</template>

<script lang="ts" setup>
import type { IMenu } from '@/store/useMenu'
import { useSetting, useMenu } from '@/store'
import { storeToRefs } from 'pinia'
import { HelpFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { MenuRender } from './lib/menuRender'
import { routePathPush } from '@/utils'

const router = useRouter()
const defaultPath = computed(() => {
    return router.currentRoute.value.name
})

const useMenuStore = useMenu()
const { setting } = storeToRefs(useSetting())
const { menu } = storeToRefs(useMenuStore)

const handleRoute = async (route: IMenu) => {
    // TODO 这里要处理是否为外部链接或者外部组件
    await routePathPush(route.path)
}
</script>

<style scoped lang="scss">
.el-aside {
    background-size: contain;
    background-color: var(--menu-bg-color);
    background-image: url('@/assets/image/framework_two.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    border-right: 1px solid #ddd;
    .title {
        color: var(--menu-text-color);
        text-align: center;
        line-height: 5rem;
    }
    .el-menu {
        border-right: none;
    }
    .el-menu-item.is-active {
        color: var(--menu-active-text-color);
    }

    .el-menu-item {
        color: var(--menu-text-color);
        &:hover {
            background: var(--menu-hover-bg-color);
        }
    }
}

.menu :deep(.el-sub-menu__title) {
    color: var(--menu-text-color) !important;
    &:hover {
        background: var(--menu-hover-bg-color) !important;
    }
}
</style>
